<template>
	<div class="headerbox">
		<div class="header">
			<div class="headerL">
				<a @click="goBack" class="goback"><img src="@/assets/picture/goback.png" /></a>
			</div>
			<div class="headerC">
				<p>个人资料</p>
				<span class="headerSettings" id="showDialogBtn" @click="dialog">设置</span>
			</div>
			<div class="headerR"></div>
		</div>
	</div>
	<div class="hbox"></div>
	<div class="jsdingdan">
		<div class="jsyf">
			<div class="jsyfL">
				<p>头像：</p>
			</div>
			<div class="jsyfR"><img src="@/assets/picture/tx.png" /></div>
		</div>
		<div class="jsyf">
			<div class="jsyfL">昵称：</div>
			<div class="jsyfR" style="color:#999">{{userData.nickname}}</div>
		</div>
	</div>
	<div class="logOut" @click="logOut">退出登录</div>
	<div v-if="dialogOpen" id="dialog">
		<div class="layui-layer layui-layer-page layui-window" id="layui-layer2">
			<div class="layui-layer-title">修改信息</div>
			<div id="" class="layui-layer-content" style="height: 259px;">
				<div id="dialog" style="" class="layui-layer-wrap">
					<form class="layui-form" @submit="formSubmit">
						<div class="layui-form-item">
							<label class="layui-form-label">昵称</label>
							<div class="layui-input-block">
								<input type="text" name="nickname" required="" placeholder="请输入昵称,1~10字"
									class="layui-input" maxlength='10'>
							</div>
						</div>
						<div class="layui-form-item">
							<div class="layui-input-block">
								<button class="layui-btn" form-type="submit">立即提交</button>
							</div>
						</div>
					</form>
				</div>
			</div><span class="layui-layer-setwin" @click="closeDialog">X</span>
		</div>
	</div>
	<div v-if="dialogOpen" class="layui-layer-shade"></div>
	<div v-if="tip" class="tip-layer">
		<div class="tip">{{tipContent}}</div>
	</div>
</template>

<script>
	import axios from 'axios';
	import {
		showTips
	} from '@/assets/js/common.js';
	export default {
		name: 'login',
		data() {
			return {
				httpUrl: 'http://qgm1.fengjian123.com/service9501/',
				tipContent: '',
				tip: 0,
				dialogOpen: 0,
				userData: '',
			};
		},
		mounted() {
			this.isLogin();
		},
		methods: {
			isLogin() {
				const sessionData = window.sessionStorage.getItem('users');
				if (sessionData == null) {
					this.$router.push('/login');
					console.log("登录失效");
					return;
				}

				this.userData = JSON.parse(sessionData);
			},
			goBack() {
				this.$router.go(-1);
			},
			logOut() {
				sessionStorage.removeItem('users');
				this.$router.push('/login');
			},
			dialog() {
				this.dialogOpen = 1;
			},
			closeDialog() {
				this.dialogOpen = 0;
			},
			formSubmit: function(e) {
				e.preventDefault();
				const formData = new FormData(e.target);
				const nickname = formData.get('nickname');
				const nicknameRegex = /^.{1,10}$/;
				if (!nicknameRegex.test(nickname)) {
					showTips(this, '昵称格式不正确');
					return;
				}

				axios.post(this.httpUrl + 'user/editUser', null, {
						headers: {
							'Authorization': 'Bearer ' + this.userData.token,
							'Content-Type': 'application/json',
						},
						params: {
							userId: this.userData.id,
							nickname: nickname,
						}
					})
					.then(res => {
						if (res.data.err == 0) {
							this.dialogOpen = 0;
							this.userData.nickname = nickname;
							sessionStorage.setItem('users', JSON.stringify(this.userData));
							showTips(this, res.data.msg);
						} else if (res.data.err == 1) {
							showTips(this, res.data.msg);
							console.log(res.data.msg);
						} else {
							showTips(this, res.data.msg);
							console.log(res.data.msg);
							this.$router.push('/login');
						}
					})
					.catch(error => {
						console.error("登录失败，请检查网络", error);
						showTips(this, '登录失败，请检查网络');
					});
			},
		},
	}
</script>

<style scoped>
	@import url('@/assets/css/login-index.css');
	@import url('@/assets/css/layui.css');
</style>